<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小组作业</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css"
    />
    <link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/comm.css" />
    <link rel="stylesheet" href="css/home.css" />
  </head>
  <body>
    <div class="j-nav" id="top">
      <div class="logo-img">
        <img src="images/logo.png" width="100%" height="100%" alt="" />
      </div>
      <ul class="nav-list j-sm-display-none">
        <li><a href="index.html">首页</a></li>
        <!-- <li><a href="tank.html">作品</a></li> -->
        <li class="drowdown">
          小组作业
          <div class="drowdown-box">
            <p>
              <span class="font-weight-bold">组员作业：</span
              ><span><a href="">黄明杰</a></span
              ><span><a href="">张桂泉</a></span
              ><span><a href="">许安</a></span
              ><span><a href="">李冠林</a></span
              ><span><a href="">陈家乐</a></span>
            </p>
            <p>
              <span class="font-weight-bold">其他：</span
              ><span><a href="tank.html">坦克小游戏</a></span
              ><span
                ><a href="https://gitee.com/cvscloud/xiaozu-kaifa"
                  >小组作业码云仓库</a
                ></span
              >
            </p>
          </div>
        </li>

        <li><a href="zhang.html" target="_blank">分享</a></li>
        <li>
          <a href="https://gitee.com/cvscloud/xiaozu-kaifa" target="_blank"
            >码云</a
          >
        </li>
        <li><a href="about.html">关于</a></li>
      </ul>
      <div class="nav-form j-flex j-sm-display-none">
        <input type="text" />
        <button>搜索</button>
      </div>
      <div class="open-side j-displaynone float-right" style="cursor: pointer">
        <i
          class="fa fa-list"
          style="font-size: 30px; color: white; padding: 18px; display: block"
        ></i>
        <i
          class="fa fa-align-justify"
          style="font-size: 30px; color: white; padding: 18px; display: none"
        ></i>
      </div>
    </div>
    <div class="main-mask"></div>
    <div class="nav-side">
      <div class="sm-nav-form j-flex">
        <input type="text" />
        <button>搜索</button>
      </div>
      <ul class="sm-nav-list">
        <li><a href="index.html">首页</a></li>
        <div class="drowdown-box"></div>
        <li><a href="tank.html">作品</a></li>
        <li><a href="zhang.html" target="_blank">分享</a></li>
        <li><a href="https://gitee.com/cvscloud/xiaozu-kaifa">码云</a></li>
        <li><a href="about.html">关于</a></li>
      </ul>
    </div>

    <div class="outerTank">
      <iframe src="Tank\index.html" class="tank"></iframe>
    </div>
    <div class="j-container" style="margin-top: 100px">
      <h3 class="text-center" id="title2">Web开发技术</h3>
      <div
        class="dropdown-divider"
        style="
          background-color: orange;
          width: 190px;
          margin: auto;
          height: 5px;
          border-radius: 10px;
        "
      ></div>
      <div class="mt-4 j-flex j-justify-content-around">
        <div class="skill-box">
          <a href="https://cn.vuejs.org/" target="_blank">
            <img src="images/skillpng.png" width="100%" height="auto" alt="" />
          </a>
          <h5 class="text-center mt-3">Vue</h5>
          <p>Vue是一套构建用户界面的渐进式框架。</p>
        </div>
        <div class="skill-box">
          <a href="https://www.runoob.com/" target="_blank">
            <img src="images/pic_html5.png" width="100%" height="auto" alt="" />
          </a>
          <h5 class="text-center mt-3">H5</h5>
          <p>
            三剑客的分工<br />
            HTML：负责网页的架构；<br />
            CSS：负责网页的样式，美化；<br />
            JavaScript（JS）：负责网页的行为
          </p>
        </div>
        <div class="skill-box">
          <a href="https://nodejs.org/en" target="_blank">
            <img
              src="images/node-js-logo.png"
              width="100%"
              height="auto"
              alt=""
            />
          </a>
          <h5 class="text-center mt-3">Node.js</h5>
          <p>
            一个基于JavaScript运行的服务器端平台，用于构建高效的、可扩展的Web应用。Node.js通常与Express框架一起使用。
          </p>
        </div>
        <div class="skill-box">
          <a href="tank.html">
            <img
              src="Tank\img\tU.gif"
              width="100%"
              height="auto"
              alt=""
              style="border-radius: 100% 100%"
            />
          </a>
          <h5 class="text-center mt-3">坦克大战</h5>
          <p>一个H5小游戏,Web的魅力。</p>
        </div>
      </div>
    </div>
    <div class="footer j-mt70" style="margin-top: 100px">
      <div class="j-container j-flex j-justify-content-around">
        <div class="footer-sharp">
          <p class="text-center text-light" style="font-size: 1rem">交流一下</p>
          <input
            type="text"
            class="inp-sharp"
            placeholder="输入您的用户名"
            style="height: 30px"
          />
          <textarea
            type="text"
            class="inp-sharp"
            placeholder="分享一下您的想法"
            style="height: 100px; margin-top: 10px"
          ></textarea>
          <button>提交</button>
        </div>
        <div class="footer-end">
          <p class="text-center" style="font-size: 1rem">学习园地</p>
          <div class="j-flex j-justify-content-center imglist">
            <a href="https://www.runoob.com/" target="_blank"
              ><img
                src="images/footer1.png"
                alt=""
                title="菜鸟教程"
                width="50px"
                height="50px"
            /></a>
            <a href="https://www.bilibili.com/" target="_blank"
              ><img
                src="images/footer2.jpg"
                alt=""
                title="bilibili"
                width="50px"
                height="50px"
            /></a>
            <a href="https://www.codelover.club/" target="_blank"
              ><img
                src="https://codelover.club/icons/task/icon7.svg"
                alt=""
                title="codelover"
                width="50px"
                height="50px"
            /></a>
            <a href="https://www.runoob.com/" target="_blank"
              ><img
                src="images/footer1.png"
                alt=""
                title="菜鸟教程"
                width="50px"
                height="50px"
            /></a>
            <a href="https://www.bilibili.com/" target="_blank"
              ><img
                src="images/footer2.jpg"
                alt=""
                title="bilibili"
                width="50px"
                height="50px"
            /></a>
            <a href="https://www.codelover.club/" target="_blank"
              ><img
                src="https://codelover.club/icons/task/icon7.svg"
                alt=""
                title="codelover"
                width="50px"
                height="50px"
            /></a>
          </div>
        </div>
      </div>
      <p class="text-center text-light p-2" style="margin: 0">顺职2班第一组</p>
    </div>
    <div
      class="sidebar-open j-flex j-justify-content-center j-align-items-center"
      style="opacity: 0"
    >
      <a
        href="#"
        class="fa fa-chevron-up"
        style="font-size: 20px; color: white; text-decoration: none"
      ></a>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap-4.3.1.js"></script>
    <script src="js/home.js"></script>
  </body>
</html>
